<template>
    <!--智能发券-->
    <div class="ui-main-body">
        <div class="ui-main" style="padding-left:0;padding-right:0;">
            <!--表格模块-->
            <div class="ui-table">
                <div class="ui-tags">
                    <el-tabs v-model="activeName" @tab-click="handleTagsClick">
                        <el-tab-pane label="商家图片" name="ONGOING">
                            <div class="ui-picture-content">
                                <div class="ui-picture-left">
                                    <div class="ui-picture-type">
                                        <el-scrollbar style="height:100%;">
                                            <div
                                                @click="changeType(index)"
                                                v-for="(item, index) of allImageGroup"
                                                :key="index"
                                                class="ui-group-item"
                                                :class="{ 'ui-choose-item': index === typeIndex }"
                                            >
                                                {{ item.groupName }}
                                                <span
                                                    v-if="index === typeIndex"
                                                    style="margin-left:10px;"
                                                    >({{
                                                        tableData.page.Allpage !== undefined
                                                            ? tableData.page.Allpage
                                                            : 0
                                                    }})</span
                                                >
                                                <i
                                                    v-if="item.id !== '-1' && item.id !== '0'"
                                                    class="fa fa-trash"
                                                    style="color:#bbb;float:right;"
                                                    @click="confirmDeleteOneGroup(item.id)"
                                                ></i>
                                                <el-popover
                                                    placement="bottom"
                                                    width="310"
                                                    trigger="click"
                                                >
                                                    <el-form
                                                        ref="editGroupForm"
                                                        :model="editGroupForm"
                                                        :rules="formRules"
                                                        label-width="0"
                                                        style="padding:28px 30px;"
                                                    >
                                                        <el-form-item label="" prop="groupName">
                                                            <el-input
                                                                v-model="editGroupForm.groupName"
                                                                placeholder="请输入分组名称"
                                                            />
                                                        </el-form-item>
                                                        <div style="text-align: center;">
                                                            <el-button
                                                                @click="submitEditGroup"
                                                                type="primary"
                                                                style="margin-top:10px;width:80px;height:30px;padding:0;"
                                                                >确认</el-button
                                                            >
                                                            <el-button
                                                                @click="closeEditPopover"
                                                                style="margin-top:10px;width:80px;height:30px;padding:0;"
                                                                >取消</el-button
                                                            >
                                                        </div>
                                                    </el-form>
                                                    <i
                                                        v-if="item.id !== '-1' && item.id !== '0'"
                                                        class="fa fa-edit"
                                                        style="color:#bbb;float:right;margin-right:5px;margin-top: 1px;"
                                                        slot="reference"
                                                        @click.stop="openEditGroup(item.id)"
                                                    ></i>
                                                </el-popover>
                                            </div>
                                            <el-popover
                                                placement="bottom"
                                                width="310"
                                                :ref="`popover1`"
                                                trigger="click"
                                            >
                                                <el-form
                                                    ref="groupForm"
                                                    :model="groupForm"
                                                    :rules="formRules"
                                                    label-width="0"
                                                    style="padding:28px 30px;"
                                                >
                                                    <el-form-item label="" prop="groupName">
                                                        <el-input
                                                            v-model="groupForm.groupName"
                                                            placeholder="请输入分组名称"
                                                        />
                                                    </el-form-item>
                                                    <div style="text-align: center;">
                                                        <el-button
                                                            @click="submitGroup"
                                                            type="primary"
                                                            style="margin-top:10px;width:80px;height:30px;padding:0;"
                                                            >确认</el-button
                                                        >
                                                        <el-button
                                                            @click="closePopover"
                                                            style="margin-top:10px;width:80px;height:30px;padding:0;"
                                                            >取消</el-button
                                                        >
                                                    </div>
                                                </el-form>
                                                <el-button
                                                    slot="reference"
                                                    class="ui-operation-button"
                                                    style="margin-top:5px;"
                                                    ><i
                                                        class="fa fa-plus"
                                                        style="margin-right:5px;"
                                                    ></i
                                                    >添加分组</el-button
                                                >
                                            </el-popover>
                                        </el-scrollbar>
                                    </div>
                                </div>
                                <div class="ui-picture-right">
                                    <div class="ui-search">
                                        <div class="ui-search-display">
                                            <el-checkbox
                                                v-model="chooseAll"
                                                style="margin-top:8px;"
                                                @change="chooseAllPic"
                                                >全选</el-checkbox
                                            >
                                            <el-button
                                                @click="openImgDialog"
                                                type="primary"
                                                style="width:80px;height:30px;padding:0;font-size: 13px;margin-left:10px;"
                                                ><i class="fa fa-plus" style="margin-right:5px;"></i
                                                >上传图片</el-button
                                            >
                                            <el-button
                                                class="ui-operation-button"
                                                @click="deleteChooseImage"
                                                >批量删除</el-button
                                            >
                                            <!--<el-button class="ui-operation-button" @click="batchDownLoad">批量下载</el-button>-->
                                            <button class="ui-normal-test" v-show="false"></button>
                                            <el-popover
                                                placement="bottom"
                                                width="310"
                                                :ref="`popover3`"
                                                trigger="click"
                                            >
                                                <el-form
                                                    ref="moveForm"
                                                    :model="moveForm"
                                                    :rules="moveFormRules"
                                                    label-width="0"
                                                    style="padding:28px 30px;"
                                                >
                                                    <el-form-item label="" prop="groupId">
                                                        <el-select
                                                            style="width:100%;"
                                                            v-model="moveForm.groupId"
                                                            placeholder="选择分组"
                                                        >
                                                            <el-option
                                                                v-for="(item, index) of groupList"
                                                                :key="index"
                                                                :label="item.groupName"
                                                                :value="item.id"
                                                            />
                                                        </el-select>
                                                    </el-form-item>
                                                    <div style="text-align: center;">
                                                        <el-button
                                                            @click="submitMoveGroup"
                                                            type="primary"
                                                            style="margin-top:10px;width:80px;height:30px;padding:0;"
                                                            >确认</el-button
                                                        >
                                                        <el-button
                                                            @click="closePopover3"
                                                            style="margin-top:10px;width:80px;height:30px;padding:0;"
                                                            >取消</el-button
                                                        >
                                                    </div>
                                                </el-form>
                                                <el-button
                                                    slot="reference"
                                                    class="ui-operation-button"
                                                    >移动到</el-button
                                                >
                                            </el-popover>
                                        </div>
                                        <div class="ui-search-input">
                                            <el-input
                                                placeholder="请输入图片名称"
                                                v-model="searchModel.name"
                                            >
                                                <el-button slot="append" @click="search()"
                                                    >查询</el-button
                                                >
                                            </el-input>
                                        </div>
                                    </div>
                                    <div class="ui-pic-list" ref="imageHeight">
                                        <el-scrollbar style="height:100%;">
                                            <div class="ui-pic-item-list">
                                                <el-checkbox-group v-model="checkList">
                                                    <div
                                                        class="ui-pic-item-list-item"
                                                        style="height:240px;"
                                                        v-for="(item, index) of tableData.data"
                                                        :key="index"
                                                        @click="chooseOneImg(item.id, index)"
                                                    >
                                                        <!--chooseImg(item.id,index)-->
                                                        <div
                                                            class="ui-pic-item-list-img"
                                                            :style="{
                                                                'background-image':
                                                                    'url(' + item.url + ')'
                                                            }"
                                                        ></div>
                                                        <div class="ui-pic-item-list-text">
                                                            <el-checkbox
                                                                :label="item.id"
                                                                @click.stop.native=""
                                                                >{{ '' }}</el-checkbox
                                                            ><span v-if="activeId !== item.id">{{
                                                                item.fileName
                                                            }}</span
                                                            ><span v-else
                                                                ><el-input
                                                                    @blur="editImageName(index)"
                                                                    v-model="item.fileName"
                                                                    placeholder=""
                                                                    size="small"
                                                                    style="width: calc(100% - 24px);"
                                                            /></span>
                                                        </div>
                                                        <div
                                                            class="ui-pic-item-list-size"
                                                            style="margin-top:0;"
                                                        >
                                                            <div
                                                                class="ui-pic-item-list-size-filesize"
                                                            >
                                                                {{ item.fileSize }}
                                                            </div>
                                                            <div class="ui-pic-item-list-size-date">
                                                                {{
                                                                    item.createTime.split(' ')[0]
                                                                }}上传
                                                            </div>
                                                        </div>
                                                        <div
                                                            style="display: flex;align-items: center;justify-content: flex-end;padding:0 13px;box-sizing: border-box;"
                                                        >
                                                            <el-button
                                                                type="text"
                                                                style="font-size:13px;"
                                                                @click.stop="preView(item.url)"
                                                                >预览</el-button
                                                            >
                                                        </div>
                                                        <el-popover
                                                            placement="bottom"
                                                            width="80"
                                                            :ref="`popover2` + index"
                                                            @click.stop.native=""
                                                            trigger="click"
                                                        >
                                                            <div class="ui-more-operation">
                                                                <el-button
                                                                    type="text"
                                                                    class="ui-more-operation-button"
                                                                    @click="rename(item.id)"
                                                                    >重命名</el-button
                                                                >
                                                                <!--<el-button type="text" class="ui-more-operation-button" @click="downs(item.url)">下载</el-button>-->
                                                                <el-button
                                                                    type="text"
                                                                    class="ui-more-operation-button"
                                                                    @click="
                                                                        deleteOneImage(
                                                                            item.id,
                                                                            index
                                                                        )
                                                                    "
                                                                    >删除</el-button
                                                                >
                                                            </div>
                                                            <div
                                                                slot="reference"
                                                                class="ui-pic-more-operation"
                                                            >
                                                                <i class="el-icon-more"></i>
                                                            </div>
                                                        </el-popover>
                                                    </div>
                                                </el-checkbox-group>
                                            </div>
                                        </el-scrollbar>
                                    </div>
                                    <div class="ui-pic-bottom">
                                        <!--<el-button @click="openImgDialog" type="primary" style="width:80px;height:30px;padding:0;font-size: 13px;"><i class="fa fa-plus" style="margin-right:5px;"></i>上传图片</el-button>-->
                                        <div class="ui-pagination">
                                            <el-pagination
                                                background
                                                v-on:size-change="tableData.page.handleSizeChange"
                                                v-on:current-change="
                                                    tableData.page.handleCurrentChange
                                                "
                                                v-bind:current-page="
                                                    tableData.page.CurrentPage
                                                        ? tableData.page.currentPage
                                                        : 1
                                                "
                                                v-bind:page-size="tableData.page.pagesize"
                                                layout="total, prev, pager, next"
                                                v-bind:total="tableData.page.Allpage"
                                                v-if="tableData.isPage"
                                            >
                                            </el-pagination>
                                        </div>
                                        <div class="ui-choose-button">
                                            <el-button
                                                type="primary"
                                                class="ui-button"
                                                @click="confirmImg"
                                                >确定</el-button
                                            >
                                            <el-button class="ui-button" @click="cancleImg"
                                                >取消</el-button
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>

        <!--上传图片-->
        <div v-if="uploadImageVisible">
            <el-dialog
                title="上传图片"
                :visible.sync="uploadImageVisible"
                width="590px"
                height="300px"
            >
                <div>
                    <upload-image @refresh="refreshImg" @close="closeDialog"></upload-image>
                </div>
            </el-dialog>
        </div>

        <div v-if="preImageVisible" class="ui-prev-image">
            <el-dialog
                title="图片预览"
                :visible.sync="preImageVisible"
                width="600px"
                height="300px"
            >
                <div
                    style="width:100%;height:400px;display: flex;align-items: center;justify-content: center;"
                >
                    <img :src="preImageUrl" style="max-height:100%;max-width: 100%;margin:auto;" />
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {
    uploadImage,
    queryConditionList,
    queryAllImageGroup,
    createImageGroup,
    updateImageGroup,
    moveToImage,
    batchDeleteImage,
    deleteImage,
    updateImageName,
    deleteImageGroup
} from '@/api/image';
import { alertSuccess, alertError, alertWarning, formatTime } from '@/utils/index';
import UploadImage from './uploadImage';
export default {
    name: 'memberImport',
    components: {
        UploadImage
    },
    data() {
        return {
            activeName: 'ONGOING',
            fileList: [],
            checkList: [],
            checkSystemkList: [],
            allImageGroup: [],
            allSystemImageGroup: [],
            groupList: [],
            listLoading: false,
            uploadImageVisible: false,
            preImageVisible: false,
            typeIndex: 0,
            typeIndex2: 0,
            groupName: '',
            picName: '',
            picId: '',
            activeId: '',
            imgIndex: 0,
            chooseAll: false,
            groupForm: {
                groupName: ''
            },
            editGroupForm: {
                id: '',
                groupName: ''
            },
            formRules: {
                groupName: [{ required: true, trigger: 'blur', message: '请输入分组名称' }]
            },
            moveForm: {
                groupId: '',
                ids: []
            },
            moveFormRules: {
                groupId: [{ required: true, trigger: 'change', message: '请输入分组' }]
            },
            searchModel: {
                groupId: '',
                isFull: 1,
                name: '',
                pageNum: 1,
                pageSize: 12,
                countSql: true,
                reasonable: true
            },
            pageOptions: {
                currentChageFlag: false
            },
            tableData: {
                data: [],
                isPage: false,
                multipleSelection: [],
                page: {}
            },
            typeList: [
                {
                    groupName: '全部分组',
                    id: '-1'
                },
                {
                    groupName: '未分组',
                    id: '0'
                }
            ],
            prevImg: [],
            clientHeight: 0,
            preImageUrl: ''
        };
    },
    mounted() {
        // 获取浏览器可视区域高度
        this.clientHeight = `${document.documentElement.clientHeight}`;
        window.onresize = function temp() {
            this.clientHeight = `${document.documentElement.clientHeight}`;
        };
        this.initPageData();
    },
    methods: {
        // *********************************** 公共方法 *****************************************
        filterNullFields(options) {
            // 删除空字段
            let param = Object.assign(options);
            if (Object.keys.length > 0) {
                for (let key in param) {
                    if (!param[key] && param[key] !== 0) {
                        delete param[key];
                    }
                }
            }
            return param;
        },
        getQueryParam(value) {
            // 获取查询字段参数 ٩(๑❛ᴗ❛๑)۶
            let model = this.searchModel;
            let options = {};
            for (const key in model) {
                if (key !== 'checkInTime') {
                    Object.assign(options, { [key]: model[key] });
                }
                delete model.currentPage;
            }
            let time = {};
            if (Array.isArray(model.checkInTime) && model.checkInTime.length) {
                time = {
                    startTime: new Date(model.checkInTime[0]).getTime(),
                    endTime: new Date(model.checkInTime[1]).getTime()
                };
            }
            let param = Object.assign({}, options, value, time);
            return this.filterNullFields(param);
        },
        // *********************************** 页面逻辑 *****************************************
        initPageData() {
            // 初始化页面数据 包括下拉菜单的选项以及表格数据
            // 这个参数拿的也太费劲了╭(╬◣д◢) 必须写在setTimeout里 否则娶不到model下的数据(╰_╯)#会报错
            setTimeout(() => {
                let initTableParm = { ...{ pageNum: 1, pageSize: 12 } };
                Promise.all([
                    this.getAllImageGroup(),
                    this.getTableData(this.getQueryParam(initTableParm))
                ])
                    .then(res => {})
                    .catch(err => {
                        console.log('err', err);
                    });
            });
        },
        getTableData(options) {
            // 获取表格初始数据 模拟请求回来的数据
            queryConditionList(options)
                .then(res => {
                    // 请求接口
                    if (res.data.success) {
                        let total = res.extra === undefined ? 0 : res.extra.total;
                        if (res.extra !== undefined && res.extra.total) {
                            // 总数存在的话 加分页
                            this.tableData.isPage = true;
                        } else {
                            this.tableData.isPage = false;
                        }
                        this.tableData.page = {
                            currentPage: parseInt(this.searchModel.pageNum, 10),
                            pagesize: this.searchModel.pageSize,
                            handleSizeChange: this.handleSizeChange, // 分页条数改变触发该函数
                            handleCurrentChange: this.handleCurrentChange, // 当前页码改变触发改函数
                            Allpage: total
                        };

                        this.pageOptions.currentChageFlag = false; // 防止点击分页条数时多次触发提交请求
                        //let content = res.data.data
                        let content = [];
                        if (Array.isArray(res.data.data)) {
                            content = res.data.data;
                        }
                        this.tableData.data = content;
                    } else {
                        alertError(res.data.msg, this);
                    }
                })
                .catch(err => {
                    console.log('err', err);
                });
        },
        handleSizeChange(val) {
            // 分页条数改变触发该函数
            this.pageOptions.currentChageFlag = true;
            let handlesize = this.getQueryParam({ ...{ pageSize: val, pageNum: 1 } });
            this.searchModel.pageNum = 1;
            this.searchModel.pageSize = val;
            this.getTableData(handlesize);
            this.chooseAll = false;
            this.checkList = [];
        },
        handleCurrentChange(val) {
            // 当前页码改变触发改函数
            if (!this.pageOptions.currentChageFlag) {
                const pagesize = this.tableData.page.pagesize;
                let handlesize = this.getQueryParam({ ...{ pageNum: val, pageSize: pagesize } });
                this.searchModel.pageNum = val;
                this.searchModel.pageSize = pagesize;
                this.getTableData(handlesize);
                this.chooseAll = false;
                this.checkList = [];
            }
        },
        submitGroup() {
            this.$refs.groupForm.validate(valid => {
                if (valid) {
                    var data = JSON.parse(JSON.stringify(this.groupForm));
                    createImageGroup(this.filterNullFields(data))
                        .then(res => {
                            if (res.data.success) {
                                alertSuccess('添加分组成功', this);
                                this.getAllImageGroup();
                                this.closePopover();
                            } else {
                                alertError(res.data.msg, this);
                                this.loading = false;
                            }
                        })
                        .catch(error => {
                            alertError('添加分组失败', this);
                            this.loading = false;
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        submitEditGroup() {
            var data = JSON.parse(JSON.stringify(this.editGroupForm));
            updateImageGroup(this.filterNullFields(data))
                .then(res => {
                    if (res.data.success) {
                        alertSuccess('更新分组成功', this);
                        this.getAllImageGroup();
                        this.closeEditPopover();
                    } else {
                        alertError(res.data.msg, this);
                        this.loading = false;
                    }
                })
                .catch(error => {
                    alertError('更新分组失败', this);
                    this.loading = false;
                });
        },
        submitMoveGroup() {
            if (this.checkList.length === 0) {
                alertWarning('请选择图片', this);
            } else {
                this.$refs.moveForm.validate(valid => {
                    if (valid) {
                        var data = JSON.parse(JSON.stringify(this.moveForm));
                        data.ids = this.checkList;
                        moveToImage(this.filterNullFields(data))
                            .then(res => {
                                if (res.data.success) {
                                    alertSuccess('移动分组成功', this);
                                    this.closePopover3();
                                    this.getTableData(this.getQueryParam());
                                } else {
                                    alertError(res.data.msg, this);
                                    this.loading = false;
                                }
                            })
                            .catch(error => {
                                alertError('移动分组失败', this);
                                this.loading = false;
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        //批量删除图片
        deleteChooseImage() {
            if (this.checkList.length === 0) {
                alertWarning('请选择图片', this);
            } else {
                let data = {
                    ids: this.checkList
                };
                batchDeleteImage(data)
                    .then(res => {
                        if (res.data.success) {
                            alertSuccess('图片删除成功', this);
                            this.getTableData(this.getQueryParam());
                        } else {
                            alertError(res.data.msg, this);
                            this.loading = false;
                        }
                    })
                    .catch(error => {
                        alertError('图片删除失败', this);
                        this.loading = false;
                    });
            }
        },
        //确认删除分组
        confirmDeleteOneGroup(id) {
            this.$confirm('确认删除该分组?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.deleteOneGroup(id);
                })
                .catch(() => {});
        },
        //删除一个分组
        deleteOneGroup(id) {
            let data = {
                id: id
            };
            deleteImageGroup(data)
                .then(res => {
                    if (res.data.success) {
                        alertSuccess('分组删除成功', this);
                        this.getAllImageGroup();
                        if (this.searchModel.groupId === id) {
                            this.searchModel.groupId = '';
                            this.searchModel.isFull = 1;
                        }
                        this.getTableData(this.getQueryParam());
                    } else {
                        alertError(res.data.msg, this);
                    }
                })
                .catch(error => {
                    alertError('分组删除失败', this);
                });
        },
        openEditGroup(id) {
            this.allImageGroup.forEach((item, index) => {
                if (item.id === id) {
                    Object.assign(this.editGroupForm, {
                        id: id,
                        groupName: item.groupName
                    });
                }
            });
        },
        chooseAllPic() {
            if (this.chooseAll === false) {
                this.checkList = [];
            } else {
                this.tableData.data.forEach((item, index) => {
                    this.checkList.push(item.id);
                });
            }
        },
        deleteOneImage(id, index) {
            let data = {
                id: id
            };
            deleteImage(data)
                .then(res => {
                    if (res.data.success) {
                        alertSuccess('图片删除成功', this);
                        this.closePopover2(index);
                        this.getTableData(this.getQueryParam());
                    } else {
                        alertError(res.data.msg, this);
                    }
                })
                .catch(error => {
                    alertError('图片删除失败', this);
                });
        },
        batchDownLoad() {
            if (this.checkList.length === 0) {
                alertWarning('请选择图片', this);
            } else {
            }
        },
        downloadIamge(imgsrc, name) {
            //下载图片地址和图片名
            var image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute('crossOrigin', 'anonymous');
            image.onload = function() {
                var canvas = document.createElement('canvas');
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext('2d');
                context.drawImage(image, 0, 0, image.width, image.height);
                var url = canvas.toDataURL('image/png'); //得到图片的base64编码数据

                var a = document.createElement('a'); // 生成一个a元素
                var event = new MouseEvent('click'); // 创建一个单击事件
                a.download = name || 'photo'; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = imgsrc;
        },
        downs(url) {
            this.downloadIamge(url, 'pic');
        },
        rename(id) {
            this.activeId = id;
        },
        editImageName(index) {
            let image = this.tableData.data[index];
            let data = {
                fileName: image.fileName,
                groupId: image.groupId !== undefined ? image.groupId : '',
                id: image.id
            };
            updateImageName(this.filterNullFields(data))
                .then(res => {
                    if (res.data.success) {
                        alertSuccess('重命名成功', this);
                        this.activeId = '';
                        this.getTableData(this.getQueryParam());
                    } else {
                        alertError(res.data.msg, this);
                    }
                })
                .catch(error => {
                    alertError('重命名失败', this);
                });
        },
        refreshImg() {
            alertSuccess('图片上传成功', this);
            this.uploadImageVisible = false;
            this.getTableData(this.getQueryParam({ pageNum: 1, pageSize: 12 }));
        },
        closeDialog() {
            this.uploadImageVisible = false;
        },
        openImgDialog() {
            this.uploadImageVisible = true;
        },
        handleChange(file, fileList) {
            let image = file.raw;
            let fileName = file.name;
            let obj = {
                file: image,
                fileName: fileName
            };
            let array = [];
            array.push(obj);
            let data = {
                files: array,
                groupId: this.searchModel.groupId
            };
            uploadImage(this.filterNullFields(data))
                .then(res => {
                    // 请求接口
                    if (res.data.success) {
                        alertSuccess('添加图片成功', this);
                        this.getTableData(this.getQueryParam({ pageNum: 1, pageSize: 12 }));
                    } else {
                        alertError(res.data.msg, this);
                    }
                })
                .catch(err => {
                    alertError('修改会员等级失败', this);
                    console.log('err', err);
                });
        },
        getAllImageGroup() {
            queryAllImageGroup()
                .then(res => {
                    // 请求接口
                    if (res.data.success) {
                        this.allImageGroup = this.typeList.concat(res.data.data);
                        this.groupList = res.data.data;
                    } else {
                        alertError(res.data.msg, this);
                    }
                })
                .catch(err => {
                    console.log('err', err);
                });
        },
        changeType(index) {
            this.typeIndex = index;
            let obj = this.allImageGroup[index];
            if (obj.id === '-1') {
                this.searchModel.groupId = '';
                this.searchModel.isFull = 1;
            } else if (obj.id === '0') {
                this.searchModel.groupId = '';
                this.searchModel.isFull = 0;
            } else {
                this.searchModel.groupId = obj.id;
                this.searchModel.isFull = 0;
            }
            this.getTableData(this.getQueryParam({ pageNum: 1, pageSize: 12 }));
        },
        chooseImg(id, index) {
            if (this.picId === id) {
                this.picId = '';
            } else {
                this.picId = id;
                this.imgIndex = index;
            }
        },
        chooseOneImg(id, index) {
            if (this.checkList.indexOf(id) > -1) {
                this.checkList.splice(this.checkList.indexOf(id), 1);
            } else {
                this.checkList.push(id);
            }
        },
        search() {
            this.getTableData(this.getQueryParam({ pageNum: 1, pageSize: 12 }));
        },

        handleFileChange(file, fileList) {
            this.mgcForm.picture = file.raw;
            if (file) {
                let reader = new FileReader();
                let that = this;
                reader.readAsDataURL(file.raw);
                reader.onload = function(e) {
                    // 这里的this 指向reader
                    that.prevMgcImg = this.result;
                };
            }
        },
        handleTagsClick(tab, event) {
            if (tab.name === 'ONGOING') {
                /*this.searchModel.name = ''
          this.searchModel.pageNum = 1
          this.searchModel.pageSize = 12
          this.getTableData(this.getQueryParam({pageNum: 1, pageSize: 12}))*/
            } else if (tab.name === 'UNSTART') {
                /* this.searchModel1.name = ''
          this.searchModel1.pageNum = 1
          this.searchModel1.pageSize = 10
          this.getTableData1(this.getQueryParam1({pageNum: 1, pageSize: 12}))*/
            }
        },
        closePopover() {
            this.$refs.popover1.doClose();
            this.$refs.groupForm.resetFields();
        },
        closeEditPopover() {
            document.querySelector('.ui-normal-test').click();
        },
        closePopover2(index) {
            this.$refs['popover2' + index][0].doClose();
        },
        closePopover3() {
            this.$refs.popover3.doClose();
            this.$refs.moveForm.resetFields();
        },
        changeFixed(clientHeight) {
            //动态修改样式
            this.$refs.imageHeight.style.height = clientHeight - 330 + 'px';
        },
        preView(url) {
            this.preImageUrl = url;
            this.preImageVisible = true;
        }
    },
    computed: {},
    watch: {
        clientHeight: function() {
            this.changeFixed(this.clientHeight);
        }
    }
};
</script>
<style lang="scss">
.ui-table .el-table td,
.el-table th {
    padding: 8px 0 !important;
}
.ui-tags .el-tabs__nav-wrap::after {
    background-color: transparent !important;
}
.ui-tags .el-tabs__nav-scroll {
    box-sizing: border-box;
    margin-top: 0;
}
.ui-tags .el-tabs__item {
    height: 34px !important;
    line-height: 34px !important;
}
.ui-tags .el-tabs__active-bar {
    height: 4px !important;
}
.ui-tags .el-tabs__content {
    width: calc(100% + 30px);
    margin-left: -15px;
}
.ui-preferential .el-input__inner {
    border: none !important;
}
.el-popper {
    min-width: 80px !important;
}
.ui-prev-image .el-dialog__body {
    padding: 0 !important;
}
</style>
<style lang="scss" scoped>
.ui-main-body {
    width: 100%;
    height: 100%;
}
.ui-main {
    background: #fff;
    border-radius: 6px;
}
.ui-search {
    overflow: hidden;
    padding: 25px 0 15px 18px;
    border-radius: 5px;
    box-sizing: border-box;
    background: #fff;
}
.ui-search-item {
    float: left;
    width: 180px;
    margin-right: 40px;
}
.ui-table {
    width: 100%;
    /*padding-bottom:160px;*/
    box-sizing: border-box;
    border-radius: 4px;
    .ui-table-order {
        margin-top: -3px;
        margin-bottom: -3px;
    }
    .ui-order-view {
        color: #3f9eff;
        font-size: 13px;
        span {
            color: #fd223c;
            font-size: 13px;
            cursor: pointer;
        }
    }
    .ui-order-num {
        color: #3f9eff;
        font-size: 13px;
        margin-top: -6px;
        span {
            color: #fd223c;
        }
    }
    .ui-pagination {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50px;
    }
    .ui-export {
        margin-top: 10px;
        button {
            width: 106px;
            height: 30px;
            border-radius: 5px;
            color: #fff;
            background: #ffb43f;
            border: none;
            font-size: 14px;
            cursor: pointer;
        }
    }
}
.ui-upload-button {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    img {
        margin-bottom: 10px;
    }
    .ui-upload-name {
        font-size: 12px;
        color: #999;
        height: 20px;
        line-height: 20px;
    }
}

.ui-tag-item {
    width: 33.33%;
    float: left;
}
.ui-tags {
    padding: 0 15px;
    box-sizing: border-box;
}
.ui-tabs-content {
    border-radius: 4px;
    background: #fff;
}
.ui-picture-content {
    width: 100%;
    display: flex;
    border-top: 1px solid #eee;
    .ui-picture-left {
        width: 200px;
        height: 100%;
        padding: 20px 15px;
        .ui-picture-search {
            height: 30px;
        }
        .ui-picture-type {
            width: 100%;
            height: calc(100% - 45px);
            .ui-group-item {
                width: 100%;
                height: 34px;
                margin: 1px 0;
                padding: 11px 20px;
                box-sizing: border-box;
                color: #292929;
                font-size: 14px;
                cursor: pointer;
            }
            .ui-choose-item {
                color: #35323b;
                background: #f2f2f6;
                font-weight: bold;
            }
            .ui-group-item:hover {
                color: #35323b;
                background: #f2f2f6;
            }
        }
    }
    .ui-picture-right {
        width: calc(100% - 200px);
        border-left: 1px solid #eee;
        height: 100%;
        .ui-search {
            display: flex;
            height: 60px;
            padding: 0 28px;
            margin-top: 20px;
            .ui-search-display {
                display: flex;
                flex: 1;
                .ui-search-name {
                    height: 28px;
                    line-height: 28px;
                    color: #595961;
                    font-size: 12px;
                    margin-right: 4px;
                }
                .ui-search-item {
                    width: 82px;
                    height: 28px;
                    border-radius: 4px;
                    text-align: center;
                    line-height: 28px;
                    color: #595961;
                    font-size: 12px;
                    border: 1px solid #e3e2e5;
                    margin-right: 4px;
                }
                .ui-item-choose {
                    background: #3f9eff !important;
                    color: #fff !important;
                }
            }
        }
        .ui-pic-list {
            width: 100%;
            height: 780px;
            .ui-pic-item-list {
                padding: 0 25px 20px 25px;
                box-sizing: border-box;
                overflow: hidden;
                .ui-pic-item-list-item {
                    width: calc(25% - 20px);
                    height: 230px;
                    border: 1px solid #eee;
                    float: left;
                    margin-right: 20px;
                    margin-bottom: 20px;
                    cursor: pointer;
                    position: relative;
                    .ui-pic-more-operation {
                        width: 27px;
                        height: 27px;
                        position: absolute;
                        right: 9px;
                        top: 9px;
                        border-radius: 50%;
                        background: #fff;
                        border: 1px solid #bbb;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        i {
                            color: #aaa;
                            font-size: 19px;
                            margin-top: 2px;
                        }
                    }
                    .ui-pic-item-list-img {
                        width: 100%;
                        height: 160px;
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-position: center center;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .ui-pic-item-list-text {
                        width: 100%;
                        height: 30px;
                        line-height: 24px;
                        display: block;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin-top: 5px;
                        font-size: 12px;
                        color: #595961;
                        text-align: left;
                        padding: 0 13px;
                        box-sizing: border-box;
                    }
                    .ui-pic-item-list-size {
                        display: flex;
                        margin-top: 10px;
                        padding: 0 13px;
                        box-sizing: border-box;
                        .ui-pic-item-list-size-filesize {
                            font-size: 11px;
                            color: #999;
                            flex: 1;
                        }
                        .ui-pic-item-list-size-date {
                            font-size: 11px;
                            color: #999;
                        }
                    }
                    .ui-select-mask {
                        border-radius: 6px;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        background: rgba(0, 0, 0, 0.5);
                        text-align: center;
                        img {
                            position: absolute;
                            top: 50px;
                            left: 45px;
                        }
                    }
                }
            }
        }
        .ui-pic-bottom {
            width: 100%;
            height: 50px;
            padding: 0px 25px;
            display: flex;
            .ui-button {
                width: 85px;
                height: 28px;
                padding: 0;
            }
            .ui-pagination {
                flex: 1;
                text-align: right;
            }
        }
    }
}
.ui-operation-button {
    border: 1px solid #3f9eff;
    color: #3f9eff;
    width: 84px;
    height: 28px;
    padding: 0;
    margin-left: 10px;
}
.ui-more-operation {
    width: 100%;
    text-align: center;
    .ui-more-operation-button {
        display: block;
        height: 30px;
        text-align: center;
        font-size: 13px;
    }
}
</style>
